<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/WEB-INF/jsp/common/meta.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台数据接收  Demo</title>
</head>
<body>
<div class="easyui-layout" fit=true>
    <div data-options="region:'center',title:'@RequestBody的使用',border:false"
         style="padding: 0px;">
        <div style="width: 900px;margin: 10px;border: 1px solid;">
	       <strong>demo内容：</strong>后台数据接收：使用@RequestBody、不使用@RequestBody<br/>
	       <strong>适 用 场 景：</strong>1、单条数据（实体对象接收）；2、多条数据（List接收）；3、主、从表数据提交（复杂对象：对象中包含其他对象或者List类型）；
                                      4、结合了url请求路径中restful风格参数、etc参数以及token参数。<br/>
	       <strong>使 用 说 明：</strong>@RequestBody接收的是JSON对象的字符串，并将其解析，绑定到controller中的实体对象或者List上。<br/>
	       <strong>注 意 事 项：</strong>详情请见开发手册<br/>	
	       <strong>特别提醒：</strong>是否选择使用@RequestBody请根据具体业务需求进行择优处理<br/>	     	       
	    </div>
        <div class="block_title">
		    &nbsp;&nbsp;是否使用@RequestBody：
		    <select id="selectMode" name="selectMode" class="easyui-combobox" 
			    style="width: 80px;" panelHeight="auto" editable="false">
			    <option value="0" selected="selected">使用</option>
			    <option value="1">不使用</option>
		    </select> <br/>
		</div>
        <div class="block_title">
		    <h4>1、单条数据测试场景</h4>	
		    <em><a onclick="javascript:HgUi.hideShowSearch(this);" class="slide_up"></a></em>
		</div>
         <form id="singleData_form" class="hgform">
		    <table width="80%" class="hgtable" style="margin-left:25px;"> 
		         <tr>
		             <td align="right">姓名：</td>
		             <td>
		                 <input id="name_A" name="name">
		             </td>
		             <td align="right">性别：</td>
		             <td>
		                 <select id="selectSex" name="sex" class="easyui-combobox" 
			                  style="width: 50px;" panelHeight="auto" editable="false">
			                 <option value="0" selected="selected">男</option>
			                 <option value="1">女</option>
		                 </select>
		             </td>
		             <td align="right">电话：</td>
		             <td>
		             <input id="tel_A" name="tel">
		             </td>
		             <td align="right">家庭住址：</td>
		             <td>
		             <input id="address_A" name="address">
		             </td>
		             <td>
		                 <a class="easyui-linkbutton" iconCls="icon-ok" id="single_button"
		                     onclick="testSingle(this)">测试单条数据提交</a>
		             </td>
		         </tr>
		    </table>
	    </form>  
        <div class="block_title">
		    <h4>2、多条数据测试场景</h4>	
		    <em><a onclick="javascript:HgUi.hideShowSearch(this);" class="slide_up"></a></em>
		</div> 
		<div style="margin-left:30px;margin-top:10px;">	 
		    <form id="multipData_form" class="hgform">  
		        <table style="height:auto;width:80%;" cellpadding="0" cellspacing="0" id="multipData_table"> 
			    </table>
		    </form> 
	        <div style="margin-top:10px;">
	            <a class="easyui-linkbutton" iconCls="icon-ok" 
	                   onclick="testMultip(this)">测试多条数据提交</a>
	        </div>
		</div>
    	<div class="block_title" style="margin-top:10px;">
		    <h4>3、主、从表数据提交测试场景</h4>	
		    <em><a onclick="javascript:HgUi.hideShowSearch(this);" class="slide_up"></a></em>
		</div>
		<div style="margin-left:30px;margin-top:10px;">
			<table id="basicInfo_table" toolbar="#add_toolbar" style="height:auto;width:80%;" cellpadding="0" cellspacing="0" > 
			</table>
		</div>
        <div id="add_toolbar" tag=listen_hotkey>
            <table>
               <tr>
                   <td><a href="javascript:void(0)" class="easyui-linkbutton"
                           iconCls="icon_add1" plain="true" tag="add" id="addInfo">添加个人信息</a></td>
                   </tr>
               </table>
        </div>
    </div>
</div>

	<script type="text/javascript">
	var complexDataGrid = new HgUi.Datagrid("basicInfo_table");
	complexDataGrid.init();
	//---------------------------------------------------------------------------------
	var dataInfo = [];//全局变量：保存动态添加行的数据信息
	var testParam = "testValue";//全局变量：restful风格的url参数，可根据实际业务需求赋值
	//------------------------------------页面加载时------------------------------------
	$(function(){
		//页面加载完成时，装入token
		HgUtil.initSubmitToken("#singleData_form");
		HgUtil.initSubmitToken("#multipData_form");
		//页面初始化
		intitHtml();
	});
	//------------------------------------页面初始化：初始化datagrid ------------------------------------
	function intitHtml(){
		//初始化多条数据的datagrid
		var columns = [[
			 			{field:'name',title:'姓名',width:'20%',align:'center'},
			 			{field:'sex',title:'性别',width:'10%',align:'center'},
						{field:'tel',title:'电话',width:'30%',align:'center'},
						{field:'address',title:'家庭住址',width:'30%',align:'center'}
					]];
	    $("#multipData_table").datagrid({
	    	singleSelect:true,
			rownumbers:true,
			columns:columns,
			data:[{"name":"张三","sex":"男","tel":"15966676367","address":"山东省济南市历下区"},
			      {"name":"李四","sex":"女","tel":"15966676367","address":"山东省济南市高新区"}]
		});
	    //初始化复杂数据的datagrid
	    $("#basicInfo_table").datagrid({
	    	singleSelect:true,
			rownumbers:true,
			columns:columns,
			data:[{"name":"王明","sex":"男","tel":"15966676367","address":"山东省济南市历下区"},
				  {"name":"李月","sex":"女","tel":"15966676367","address":"山东省济南市高新区"}]
		});
	}
    //------------------------------------测试单条数据，后台实体对象接收------------------------------------
    function testSingle(button){
    	var modeValue = $('#selectMode').combobox('getValue');//是否使用@RequestBody:0 使用，1 不使用
    	var name = $("#name_A").val();
    	var sex = $("#selectSex").combobox('getText');
    	var tel = $("#tel_A").val();
    	var address = $("#address_A").val();
    	var submitToken = $("#singleData_form").find("#submitToken").val();//获取页面加载完成时装入的submitToken的值
    	if(modeValue == 0){
    		var submitData = {"name":name,"sex":sex,"tel":tel,"address":address};
    		var submitUrl ="/common/demo/requestBody/addSingle_useRequestBody/"+testParam;
    		//$("#single_button").linkbutton('disable');
        	HgUtil.postByJson(submitUrl,submitData,submitToken,function(data){
        		//$("#single_button").linkbutton('enable');
        		if(data.success){
		    		HgUi.ok('模拟测试单条数据成功！返回的数据为'+data.data, function(){
						//TODO
					})
	    		}else{
	    			HgUi.error('模拟测试单条数据失败！',function(){
	    				HgUtil.initSubmitToken("#singleData_form");
	    				//TODO
					});
	    		}
        	},null);
    	}else if(modeValue == 1){
    		var submitData = $("#singleData_form").serialize();//序列化之后，会包含submitToken参数
    		var submitUrl ="/common/demo/requestBody/addSingle_noUseRequestBody/"+testParam;
	    	HgUtil.post(submitUrl,submitData,function(result){
	    			if(result.success){
	    				HgUi.ok('模拟测试单条数据成功！返回的数据为'+result.data, function(){
							//TODO
						})	
	    			}else{
	    				HgUtil.initSubmitToken("#singleData_form");
	    				$.messager.alert("提示","模拟测试单条数据失败！","warning");
	    				return false;
	    			}
	    		},null)
	    	}
    	
    }
    //------------------------------------测试多条数据 ，后台List或者String类型接收------------------------------------
    function testMultip(button){
    	var modeValue = $('#selectMode').combobox('getValue');//是否使用@RequestBody
    	var rows = $("#multipData_table").datagrid("getRows");
    	var submitData = {};
		var submitToken = $("#multipData_form").find("#submitToken").val();
    	if(modeValue == 0){
    		submitData = rows;
    		var submitUrl ="/common/demo/requestBody/addMultip_useRequestBody/"+testParam;
        	//防重复提交
        	/* if (!HgUtil.repeatSubmitCheck(button, submitUrl)){
    			return;
    		} */
        	HgUtil.postByJson(submitUrl,submitData,submitToken,function(data){
        		if(data.success){
		    		HgUi.ok('模拟测试多条数据成功！返回的数据为'+data.data, function(){
						//TODO
					})
	    		}else{
	    			HgUi.error('模拟测试多条数据失败！',function(){
	    				HgUtil.initSubmitToken("#multipData_form");
	    				//TODO
					});
	    		}
        	},null);
    	}else if(modeValue == 1){
    		submitData.data = JSON.stringify(rows);
            var submitUrl ="/common/demo/requestBody/addMultip_noUseRequestBody/"+testParam;
            HgUtil.postForToken(submitUrl,submitData,submitToken,function(data){
            	if(data.success){
		    		HgUi.ok('模拟测试多条数据成功！返回的数据为'+data.data, function(){
						//TODO
					})
	    		}else{
	    			HgUi.error('模拟测试多条数据失败！',function(){
	    				HgUtil.initSubmitToken("#multipData_form");
	    				//TODO
					});
	    		}
            },null);
    	}
    	
    }
    
    //----------------------------弹出添加页面：测试复杂数据的后台接收------------------------------------
    $("#addInfo").click(function(){ 
    	var modeValue = $('#selectMode').combobox('getValue');//是否使用@RequestBody:0 使用，1 不使用
    	//var row = $("#basicInfo_table").datagrid("getSelected");
    	//弹出添加窗口，同时将信息传递到弹出页面中并显示
    	var addInfoWin = new HgUi.window({
			id : "addInfoWin",
			width : 900,
			height : 500,
			title : "添加个人信息",
			url : "/common/demo/requestBody/toAddPage/"+modeValue
		});
    });
    </script>
</body>
</html>